<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form ref="form" :model="form" label-width="90px" :inline="true">
        <el-form-item label="订单号:">
          <el-input
            v-model="form.order_id"
            placeholder="请输入订单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户编码:">
          <el-input
            v-model="form.user_id"
            placeholder="请输入用户编码"
          ></el-input>
        </el-form-item>
        <el-form-item class="divRight">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="text item">
      <div class="divFlex">
        <el-button
          :type="statusColor == 1 ? 'primary' : ''"
          class="button"
          @click="complete"
          >全部</el-button
        >
        <el-button
          :type="statusColor == 2 ? 'primary' : ''"
          class="button"
          @click="unpaid"
          >待支付</el-button
        >
        <el-button
          :type="statusColor == 3 ? 'primary' : ''"
          class="button"
          @click="shipping"
          >待发货</el-button
        >
        <el-button
          :type="statusColor == 4 ? 'primary' : ''"
          class="button"
          @click="shipped"
          >已发货</el-button
        >
        <el-button
          :type="statusColor == 5 ? 'primary' : ''"
          class="button"
          @click="delivered"
          >已送达</el-button
        >
        <el-button
          :type="statusColor == 6 ? 'primary' : ''"
          class="button"
          @click="accomplish"
          >已完成</el-button
        >
        <el-button
          :type="statusColor == 7 ? 'primary' : ''"
          class="button"
          @click="cancel"
          >已取消</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        max-height="600"
      >
        <el-table-column
          type="index"
          align="center"
          label="序号"
          :index="indexMethod"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="order_id"
          show-overflow-tooltip
          align="center"
          label="订单编号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="ship_status_text"
          align="center"
          label="状态"
          width="140"
        >
        </el-table-column>
        <el-table-column prop="ctime" align="center" label="下单时间/支付时间">
        </el-table-column>
        <el-table-column prop="nickname" align="center" label="用户名称">
        </el-table-column>
        <el-table-column prop="ship_name" align="center" label="收货人名称">
        </el-table-column>
        <el-table-column
          prop="ship_mobile"
          align="center"
          label="收货人联系方式"
        >
        </el-table-column>
        <el-table-column prop="nums" align="center" label="商品数量">
        </el-table-column>
        <el-table-column prop="order_amount" align="center" label="订单金额">
        </el-table-column>
        <el-table-column prop="payed" align="center" label="支付金额">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="particulars(scope.row)"
              >查看</el-button
            >
            <el-button
              v-if="scope.row.status == 1 && scope.row.pay_status == 1"
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >取消订单</el-button
            >
            <!-- <el-button
              @click="accList(scope.row)"
              size="mini"
              v-if="
                scope.row.status == 1 &&
                scope.row.pay_status == 2 &&
                scope.row.confirm == 2 &&
                scope.row.ship_status == 3
              "
              >完成</el-button
            > -->
            <el-button
              @click="accList(scope.row)"
              size="mini"
              v-if="scope.row.status == 1"
              >完成</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <span>
        <div>
          <el-form
            ref="dataCollection"
            :model="dataCollection"
            label-width="100px"
          >
            <span>
              <h4>用户信息</h4>
            </span>
            <el-form-item label="用户名" class="spanMag">
              {{ dataCollection.username }}
            </el-form-item>
            <el-form-item label="用户编码" class="spanMag">
              {{ dataCollection.user_id }}
            </el-form-item>
            <!-- <el-form-item label="用户手机号" class="spanMag">
              {{ dataCollection.mobile }}
            </el-form-item> -->
            <span>
              <h4>收货人信息</h4>
            </span>
            <el-form-item label="收货人" class="spanMag">
              <!-- {{ dataCollection.mobile }} -->
              {{ dataCollection.ship_name }}
              <!-- <el-input v-model="dataCollection.ship_name"></el-input> -->
            </el-form-item>
            <el-form-item label="联系方式" class="spanMag">
              <!-- {{ dataCollection.ship_mobile }} -->
              {{ dataCollection.ship_mobile }}
            </el-form-item>
            <el-form-item label="收货地址" class="spanMag">
              {{ dataCollection.ship_address_ds + dataCollection.ship_address }}
            </el-form-item>
            <el-form-item
              label="支付方式"
              class="spanMag"
              v-if="
                dataCollection.order_type != 3 &&
                dataCollection.order_type != 11
              "
            >
              {{
                dataCollection.pay_status != 1
                  ? dataCollection.payment_code === "balancepay"
                    ? "余额支付"
                    : "微信支付"
                  : "未支付"
              }}
            </el-form-item>
            <div v-if="this.dataCollection.length != 0">
              <span>
                <h4>配送员信息</h4>
              </span>
              <el-form-item label="配送员姓名" class="spanMag">
                {{ dataCollection.name_text }}
              </el-form-item>
              <el-form-item label="联系方式" class="spanMag">
                {{ dataCollection.mobile_text }}
              </el-form-item>
            </div>
            <span>
              <h4>发票信息</h4>
            </span>
            <el-form-item class="spanMag fapiao">
              <el-descriptions title="">
                <el-descriptions-item
                  label="发票ID"
                  v-if="dataCollection.fapiao_id"
                  >{{ dataCollection.invoice[0].id }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="抬头"
                  v-if="dataCollection.fapiao_id"
                  >{{ dataCollection.invoice[0].name }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="手机号"
                  v-if="dataCollection.fapiao_id"
                  >{{ dataCollection.invoice[0].phone }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="邮箱"
                  v-if="dataCollection.fapiao_id"
                  >{{ dataCollection.invoice[0].email }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="发票类型"
                  v-if="dataCollection.fapiao_id"
                  >{{
                    dataCollection.invoice[0].type == 1 ? "个人" : "企业"
                  }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="税号"
                  v-if="
                    dataCollection.fapiao_id &&
                    dataCollection.invoice[0].type == 2
                  "
                  >{{ dataCollection.invoice[0].duty }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="企业地址"
                  v-if="
                    dataCollection.fapiao_id &&
                    dataCollection.invoice[0].type == 2
                  "
                  >{{ dataCollection.invoice[0].address }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="企业电话"
                  v-if="
                    dataCollection.fapiao_id &&
                    dataCollection.invoice[0].type == 2
                  "
                  >{{
                    dataCollection.invoice[0].enterprise_phone
                  }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="开户行名称"
                  v-if="
                    dataCollection.fapiao_id &&
                    dataCollection.invoice[0].type == 2
                  "
                  >{{
                    dataCollection.invoice[0].row_name
                  }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="开户行账号"
                  v-if="
                    dataCollection.fapiao_id &&
                    dataCollection.invoice[0].type == 2
                  "
                  >{{ dataCollection.invoice[0].account }}</el-descriptions-item
                >

                <el-descriptions-item
                  label="提示"
                  v-if="!dataCollection.fapiao_id"
                >
                  <el-tag size="small">暂无开票</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-form-item>
            <span>
              <h4>订单备注</h4>
            </span>
            <el-form-item label="订单备注" class="spanMag">
              {{ dataCollection.remark }}
            </el-form-item>
            <span>
              <h4>订单图片</h4>
            </span>
            <el-form-item
              label="订单完成图片"
              class="spanMag"
              v-if="
                dataCollection.authority_confirm_img != null &&
                dataCollection.authority_confirm_img != ''
              "
            >
              <el-image
                :lazy="lazy"
                class="imageGood"
                :src="imgHeader + dataCollection.authority_confirm_img"
                :preview-src-list="[
                  imgHeader + dataCollection.authority_confirm_img,
                ]"
                style="width: 100px; height: 100px"
              ></el-image>
            </el-form-item>
            <span>
              <h4>商品信息</h4>
            </span>
            <!-- <el-form-item label="商品信息" class="spanMag"> -->
            <el-table
              :data="productData"
              class="spanMag"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                align="center"
                label="商品名称"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="price"
                align="center"
                label="商品单价"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="nums" align="center" label="购买数量">
              </el-table-column>
              <el-table-column prop="amount" align="center" label="商品总价">
              </el-table-column>
            </el-table>
            <!-- </el-form-item> -->
            <div class="textFor">
              商品总价: {{ dataCollection.goods_amount }} 元
            </div>
            <span style="margin-top: 20px; display: block">
              <h4>售后单</h4>
            </span>
            <div>
              <!-- <el-form-item label="售后单" class="spanMag"> -->
              <el-table
                max-height="200"
                :data="dataCollection.aftersalesItem"
                border
                style="width: 100%"
                class="spanMag"
              >
                <!-- <el-table-column prop="reship_id" label="退货单号" width="">
                  </el-table-column> -->
                <el-table-column prop="aftersales_id" label="售后单号" width="">
                </el-table-column>
                <el-table-column prop="type" label="售后类型" width="150">
                  <!-- 1=仅退款，2退款退货 3换货 -->
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.type == 1
                        ? "仅退款"
                        : scope.row.type == 2
                        ? "退货退款"
                        : "换货"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="150">
                  <!-- 1未审核，2审核通过，3审核失败 -->
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.status == 1
                        ? "未审核"
                        : scope.row.status == 2
                        ? "审核通过"
                        : "审核失败"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="ctime" label="售后申请时间">
                </el-table-column>
              </el-table>
              <!-- </el-form-item> -->
            </div>
            <span style="margin-top: 20px; display: block">
              <h4>退货单</h4>
            </span>
            <div>
              <!-- <el-form-item label="退货单" class="spanMag"> -->
              <el-table
                max-height="200"
                :data="dataCollection.returnItem"
                border
                style="width: 100%"
                class="spanMag"
              >
                <el-table-column prop="reship_id" label="退货单号" width="">
                </el-table-column>
                <el-table-column prop="aftersales_id" label="售后单号" width="">
                </el-table-column>
                <el-table-column prop="reship_id" label="退货完成图片" width="">
                  <template slot-scope="scope">
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="imgHeader + scope.row.img"
                      :preview-src-list="[imgHeader + scope.row.img]"
                    ></el-image>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="status_text"
                  label="退货状态"
                  width="150"
                >
                </el-table-column>
                <el-table-column prop="stime" label="退货时间">
                </el-table-column>
              </el-table>
              <!-- </el-form-item> -->
            </div>
            <span style="margin-top: 20px; display: block">
              <h4>换货单</h4>
            </span>
            <div>
              <!-- <el-form-item label="换货单" class="spanMag"> -->
              <el-table
                max-height="200"
                :data="dataCollection.changeItem"
                border
                style="width: 100%"
                class="spanMag"
              >
                <el-table-column prop="change_id" label="换货单号" width="">
                </el-table-column>
                <el-table-column prop="aftersales_id" label="售后单号" width="">
                </el-table-column>
                <el-table-column prop="reship_id" label="换货完成图片" width="">
                  <template slot-scope="scope">
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="imgHeader + scope.row.img"
                      :preview-src-list="[imgHeader + scope.row.img]"
                    ></el-image>
                  </template>
                </el-table-column>
                <!-- 状态 1=审核通过待发货 2=已发换货 3=已收换货 -->
                <el-table-column prop="status" label="换货状态" width="150">
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.status == 1
                        ? "审核通过待发货"
                        : scope.row.status == 2
                        ? "已发换货"
                        : "已收换货"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="stime" label="换货时间">
                </el-table-column>
              </el-table>
              <!-- </el-form-item> -->
            </div>
            <span style="margin-top: 20px; display: block">
              <h4>退款单</h4>
            </span>
            <div>
              <!-- <el-form-item label="退款单" class="spanMag"> -->
              <el-table
                max-height="200"
                :data="dataCollection.refundItem"
                border
                style="width: 100%"
                class="spanMag"
              >
                <el-table-column prop="refund_id" label="退款单号" width="">
                </el-table-column>
                <el-table-column prop="aftersales_id" label="售后单号" width="">
                </el-table-column>
                <el-table-column prop="status" label="退款状态" width="150">
                  <!-- 1=未退款 2=已退款 3=退款失败，可以再次退款，4退款拒绝', -->
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.status == 1
                        ? "未退款"
                        : scope.row.status == 2
                        ? "已退款"
                        : scope.row.status == 3
                        ? "退款失败"
                        : "退款拒绝"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="money" label="退款金额">
                </el-table-column>
              </el-table>
              <!-- </el-form-item> -->
            </div>
          </el-form>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-card>
</template>
  
  <script>
import {
  getShopList,
  quxiao,
  orderDetails,
  wancheng,
} from "../../../../utils/api.js";
export default {
  data() {
    return {
      form: {
        order_id: "",
        user_id: "",
      },
      lazy: true,
      statusColor: "1",
      dataCollection: {},
      dialogVisible: false,
      loading: false,
      imgHeader: this.Global.imgHeader,

      token: sessionStorage.getItem("token"),
      //分页数据
      page: 1,
      limit: 10,
      total: 0,
      productData: [],
      tableData: [],
      status: "",
      payStatus: "",
      ship_status: "",
      order_type: 12,
      order_sh_name: "",
      order_time: "",
    };
  },
  methods: {
    onSubmit() {
      this.page = 1;
      this.ViewOrderList();
    },
    onReset() {
      (this.form.user_id = ""), (this.form.order_id = ""), this.ViewOrderList();
    },
    //全部
    complete() {
      this.status = "";
      this.payStatus = "";
      this.ship_status = "";
      this.page = 1;
      this.statusColor = 1;
      this.ViewOrderList();
    },
    //待支付
    unpaid() {
      this.status = 1;
      this.payStatus = 1;
      this.ship_status = "";
      this.page = 1;
      this.statusColor = 2;
      this.ViewOrderList();
    },
    //待发货
    shipping() {
      this.status = 1;
      this.payStatus = 2;
      this.ship_status = 1;
      this.page = 1;
      this.statusColor = 3;
      this.ViewOrderList();
    },
    //已发货
    shipped() {
      this.status = 1;
      this.payStatus = 2;
      this.ship_status = 2;
      this.page = 1;
      this.statusColor = 4;
      this.ViewOrderList();
    },
    // 已送达
    delivered() {
      this.status = 1;
      this.payStatus = 2;
      this.ship_status = 3;
      this.page = 1;
      this.statusColor = 5;
      this.ViewOrderList();
    },
    //已完成
    accomplish() {
      this.status = 2;
      this.payStatus = "";
      this.ship_status = "";
      this.page = 1;
      this.statusColor = 6;
      this.ViewOrderList();
    },
    //取消
    handleClose(done) {
      done();
    },
    //已取消
    cancel() {
      this.status = 3;
      this.payStatus = "";
      this.ship_status = "";
      this.statusColor = 7;
      this.ViewOrderList();
    },
    //完成
    accList(row) {
      wancheng(this.token, row.order_id).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.ViewOrderList();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    indexMethod(index) {
      if (this.token < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    //详情
    particulars(row) {
      this.examine(row.order_id);
      this.dialogVisible = true;
    },
    //取消订单
    handleDelete(row) {
      this.$confirm("此操作将会取消订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          quxiao(this.token, row.order_id).then((res) => {
            if (res.data.status) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.ViewOrderList();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    //分页
    handleSizeChange(val) {
      this.limit = val;
      this.ViewOrderList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.ViewOrderList();
    },
    ViewOrderList() {
      this.loading = true;
      getShopList(
        this.token,
        this.page,
        this.limit,
        this.form.user_id,
        // this.form.mobile,
        this.form.order_id,
        this.status,
        this.payStatus,
        this.ship_status,
        this.order_type,
        this.order_sh_name,
        this.order_time
      )
        .then((res) => {
          if (res.data.status) {
            this.tableData = res.data.data.data;
            this.total = res.data.data.count;
            this.tableData.forEach((item) => {
              if (item.status == 1 && item.pay_status == 1) {
                item.ship_status_text = "待支付";
              }
              if (item.status == 1 && item.pay_status == 4) {
                item.ship_status_text = "部分退款";
              }
              if (item.status == 1 && item.pay_status == 5) {
                item.ship_status_text = "全部退款";
              }
              if (
                item.status == 1 &&
                item.pay_status == 2 &&
                item.ship_status == 1
              ) {
                item.ship_status_text = "待发货";
              }
              if (
                item.status == 1 &&
                item.pay_status == 2 &&
                item.ship_status == 2
              ) {
                item.ship_status_text = "已发货";
              }
              if (
                item.status == 1 &&
                item.pay_status == 2 &&
                item.ship_status == 3 &&
                item.confirm == 1
              ) {
                item.ship_status_text = "已送达/未收货";
              }
              if (
                item.status == 1 &&
                item.pay_status == 2 &&
                item.ship_status == 3 &&
                item.confirm == 2
              ) {
                item.ship_status_text = "已送达/已收货";
              }
              if (item.status == 2) {
                item.ship_status_text = "已完成";
              }
              if (item.status == 3) {
                item.ship_status_text = "已取消";
              }
            });
            this.tableData.forEach((item) => {
              item.nums = 0;
              item.index.items.forEach((item1) => {
                item.nums += item1.nums;
              });
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    //详情
    examine(id) {
      console.log(id);
      this.loading = true;
      orderDetails(this.token, id)
        .then((res) => {
          if (res.data.status) {
            this.dataCollection = res.data.data;
            if (this.dataCollection.user) {
              this.dataCollection.mobile = this.dataCollection.user.mobile;
            }
            console.log(this.dataCollection);
            this.dataCollection.name_text =
              this.dataCollection.maintenanceInfo.name;
            this.dataCollection.mobile_text =
              this.dataCollection.maintenanceInfo.mobile;
            this.productData = this.dataCollection.items;
            this.dataCollection.returnItem.forEach((item) => {
              if (item.status == 1) {
                item.status_text = "待退货";
              }
              if (item.status == 2) {
                item.status_text = "送货工已接单"; //已结单
              }
              if (item.status == 3) {
                item.status_text = "已完成"; //已结单
              }
            });
            this.dataCollection.paymentRelItem.forEach((item) => {
              this.dataCollection.payment_code_name =
                item.bill.payment_code_name;
            });
            this.dataCollection.length =
              this.dataCollection.maintenanceInfo.length;
            this.dataCollection.ship_address_ds_text =
              this.dataCollection.ship_address_ds +
              this.dataCollection.ship_address;
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.loading = false;
              this.$message.error(res.data.msg);
            }, 5000);
          }
        })
        .catch((err) => {
          let timer = setTimeout(() => {
            this.loading = false;
            this.$message.error(err.message);
          }, 5000);
          console.log(err.message);
        });
    },
  },
  mounted() {
    this.ViewOrderList();
  },
};
</script>
  
  <style scoped>
.text {
  font-size: 14px;
}

.textFor {
  margin-left: 20px;
}

.divRight {
  margin-left: 50px;
}

.FlexItem {
  margin: 40px 0;
  margin-right: 30px;
}

.spanMag {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* .button {
  padding: 20px 60px;
} */

.divFlex {
  display: flex;
  margin: 20px 40px;
  justify-content: space-around;
  align-content: center;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.fapiao .el-form-item__content {
  margin-left: 30px !important;
}
</style>